"use client"

import { Button } from "~/registry/default/ui/button"
import { Input } from "~/registry/default/ui/input"
import { Label } from "~/registry/default/ui/label"
import {
   Sheet,
   SheetClose,
   SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
} from "~/registry/default/ui/sheet"

const SHEET_SIDES = ["top", "right", "bottom", "left"] as const

type SheetSide = (typeof SHEET_SIDES)[number]

export default function SheetSide() {
   return (
      <div className="grid grid-cols-2 gap-2">
         {SHEET_SIDES.map((side) => (
            <Sheet key={side}>
               <SheetTrigger asChild>
                  <Button variant="outline">{side}</Button>
               </SheetTrigger>
               <SheetContent side={side}>
                  <SheetHeader>
                     <SheetTitle>Edit profile</SheetTitle>
                     <SheetDescription>
                        Make changes to your profile here. Click save when
                        you're done.
                     </SheetDescription>
                  </SheetHeader>
                  <div className="grid gap-4 py-4">
                     <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="name" className="text-right">
                           Name
                        </Label>
                        <Input
                           id="name"
                           value="Pedro Duarte"
                           className="col-span-3"
                        />
                     </div>
                     <div className="grid grid-cols-4 items-center gap-4">
                        <Label htmlFor="username" className="text-right">
                           Username
                        </Label>
                        <Input
                           id="username"
                           value="~peduarte"
                           className="col-span-3"
                        />
                     </div>
                  </div>
                  <SheetFooter>
                     <SheetClose asChild>
                        <Button type="submit">Save changes</Button>
                     </SheetClose>
                  </SheetFooter>
               </SheetContent>
            </Sheet>
         ))}
      </div>
   )
}
